<template>
    <van-field
    :class="{'active':focusIdx==config.key,'error':isError==true}"
    v-model="config.value"
    :label="config.label"
    :required="config.must"
    :readonly="config.readonly"
    :disabled="config.disabled"
    :placeholder="config.placeholder"
    :maxlength="config.maxlength"
    @focus="onFocus"
    @blur="onBlur"
    ></van-field>
</template>

<script>
export default {
  data() {
    return {
      focusIdx: null,
      isError: false
    };
  },
  props: ['config'],
  methods: {
    onFocus() {
      this.focusIdx = this.config.key;
    },
    onBlur() {
      this.focusIdx = null;
      if (this.config.must && this.config.value == '') {
        this.isError = true;
      } else {
        this.isError = false;
      }
    }
  },
  watch: {
    config: {
      handler: function(val, oldVal) {
        if (val.value != '') {
          this.isError = false;
        }
        this.$store.commit('SET_EMAIL', val.value);
      },
      deep: true
    }
  }
};
</script>

<style>
</style>
